<template>
  <el-card class="main" :class="alive ? 'shadow-color-alive' : 'shadow-color-no-alive'">
    <div slot="header">
      <h4>Geth ip : {{ ip }}</h4>
    </div>
    <div>
      是否开始挖矿监听 <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        @change="change"
        :disabled="!alive"
      >
      </el-switch>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "GethInfo",
  props: {
    ip: String,
    alive: Boolean,
    miner: Boolean,
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    change(e) {
      if (e) {
        this.$axios({
          url: "/geth/open/miner",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            url: this.ip,
          },
        });
      } else {
        this.$axios({
          url: "/geth/close/miner",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            url: this.ip,
          },
        });
      }
    },
  },
  created() {
    this.value = this.miner;
  }
};
</script>

<style scoped>
.shadow-color-no-alive {
  box-shadow: 0 2px 12px 0 #ff0000;
}

.shadow-color-alive {
  box-shadow: 0 2px 12px 0 #00ff00;
}

.main {
  margin: 10px;
}
</style>
